<template>
  <div v-if="itemList.length" id="function-view">
    <div class="w main">
      <div class="title">功能介绍</div>
      <div class="item-list" :class="[sortClass]">
        <div v-for="item in itemList" :key="item.functionTag" class="item">
          <div class="item-name">{{ item.functionTag.substring(0, 12) }}</div>
          <div class="item-des elliptical-3">{{ item.functionContent }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed, inject, Ref } from 'vue'

  import { AlgoItem } from '../index.vue'

  const algoItem: Ref<AlgoItem> = inject('algoItem')!

  const itemList = computed(() => algoItem.value.algorithmFunctionIntroductionVOList)

  // 根据个数动态修改样式
  const sortClass = computed(() => {
    switch (itemList.value.length) {
      case 1:
        return 'one'

      case 2:
      case 4:
        return 'two'

      default:
        return 'three'
    }
  })
</script>

<style lang="less" scoped>
  @import '@/styles/mixins.less';

  #function-view {
    .main {
      padding: 60px 0;
      background: url('@/assets/img/algo-service/algo-title-icon.svg') no-repeat;
      background-position: 716px 50px;
      background-size: 68px 64px;

      .title {
        position: relative;
        font-size: 30px;
        text-align: center;
        background: linear-gradient(180deg, rgba(14, 14, 40, 0.95) 0%, rgba(54, 54, 99, 0.95) 100%);
        background-clip: text;
        line-height: 38px;
        -webkit-text-fill-color: transparent;
        .fw500();

        img {
          position: absolute;
          top: -7px;
          left: 50%;
          z-index: 3;
          width: 68px;
          height: 64px;
        }
      }

      .item-list {
        display: grid;
        margin-top: 56px;
        margin-bottom: -64px;
        gap: 20px;

        .item {
          position: relative;
          overflow: hidden;
          padding: 24px 40px;
          margin-bottom: 64px;
          height: 180px;
          background-color: #fff;
          border: 1px solid #e8e8eb;
          border-radius: 8px;

          .item-name {
            position: relative;
            font-size: 20px;
            line-height: 32px;
            color: rgba(16, 16, 20, 0.95);
            .fw500();
          }

          .item-des {
            margin-top: 16px;
            font-weight: 400;
            font-size: 14px;
            line-height: 22px;
            color: rgba(25, 25, 48, 0.75);
          }

          &::before {
            position: absolute;
            top: 24px;
            left: 0;
            width: 4px;
            height: 32px;
            background-color: rgba(65, 84, 209, 1);
            border-radius: 0 2px 2px 0;
            content: '';
          }

          &::after {
            content: '';
            position: absolute;
            top: 24px;
            right: 0;
            width: 32px;
            height: 32px;
            background-color: rgba(65, 84, 209, 0.05);
          }
        }

        &.one {
          grid-template-columns: repeat(auto-fill, 100%);
        }

        &.two {
          grid-template-columns: repeat(auto-fill, 678px);
        }

        &.three {
          grid-template-columns: repeat(auto-fill, 445px);
        }
      }
    }
  }
</style>
